<template>
    <a-modal :title="$t('添加远端集群')" v-model='isShow' :maskClosable='false' v-dragModal>
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" labelAlign="right">
            <a-spin :spinning="loading">
                <a-form-model-item :label="$t('访问URL') + ':'" prop="remote_cluster_url">
                    <a-input default-value="mysite" v-model="form.remote_cluster_url"
                        :placeholder="$t('Enter') + $t('访问URL')">
                        <a-select slot="addonBefore" style="width: 90px" v-model="form.remote_cluster_http">
                            <a-select-option value="http://">
                                http://
                            </a-select-option>
                            <a-select-option value="https://">
                                https://
                            </a-select-option>
                        </a-select>
                    </a-input>
                </a-form-model-item>
                <a-form-model-item :label="$t('用户名') + ':'" prop="remote_cluster_user">
                    <a-input v-model="form.remote_cluster_user" :placeholder="$t('Enter') + $t('用户名')" />
                </a-form-model-item>
                <a-form-model-item :label="$t('密码') + ':'" prop="remote_cluster_passwd">
                    <a-input-password v-model="form.remote_cluster_passwd" :placeholder="$t('Enter') + $t('密码')" />
                </a-form-model-item>
            </a-spin>
        </a-form-model>

        <template slot="footer">
            <a-button type='primary' @click="handleCreate">{{ $t('保存') }}</a-button>
            <a-button @click="handleClose">{{ $t('Cancel') }}</a-button>
        </template>

    </a-modal>
</template>

<script>
import { message } from 'ant-design-vue';
import { encrypt } from '../../../untils/aes'

export default {
    data() {
        return {
            isShow: false,
            isDisable: false,
            labelCol: { span: 5 },
            wrapperCol: { span: 18 },
            form: {
                remote_cluster_http: 'http://',
                remote_cluster_url: '',
                remote_cluster_user: '',
                remote_cluster_passwd: '',
            },

            rules: {
                remote_cluster_url: [
                    { required: true, message: this.$t('Enter') + this.$t('访问URL'), trigger: 'blur' },
                    { pattern:/^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5]):([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/, trigger: 'blur', message: this.$t('Enter') + this.$t('正确的URL') }
                ],
                remote_cluster_user: [
                    { required: true, message: this.$t('Enter') + this.$t('用户名'), trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9_]{1,128}$/, message: this.$t('名称仅支持大小写英文字母 + 数字 + 英文下划线，1-128 个字符'), trigger: 'blur' }
                ],
                remote_cluster_passwd: [
                    { required: true, message: this.$t('Enter') + this.$t('密码'), trigger: 'blur' },
                ],
            },
            loading: false,
            directory: '',
            id: '',
            level: '',
        };
    },
    methods: {
        handleCreate() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    const params = {
                        remote_cluster_url: this.form.remote_cluster_http + this.form.remote_cluster_url,
                        remote_cluster_user: this.form.remote_cluster_user,
                        remote_cluster_passwd: encrypt(this.form.remote_cluster_passwd)
                    }
                    this.loading = true
                    const { data } = await this.$api.systemSettings.appendClusterApi(params)
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') {
                        this.$emit('get-list')
                        this.handleClose()
                    }
                    this.loading = false
                } else {
                    return false;
                }
            });
        },
        handleClose() {
            this.$refs['ruleForm'].resetFields();
            this.isShow = false
        },
    }
}
</script>